<template>
  <div class="big">
    <div class="top">
      <i class="iconfont icon-xiangzuojiantou" @click="goto"></i>
      <span>热点资讯</span>
    </div>
    <div class="box" v-for="item in list" :key="item.filmId">
      <div>{{ item.synopsis }}</div>
      <span>{{ item.category | enen }}</span>
      <span class="actors">{{ item.actors | handlerActors }}</span>
      <img :src="item.poster" alt="" width="66px" height="92.52px" />
    </div>
    <div class="bottom">END</div>
  </div>
</template>
<script>
import api from '@/api'
import Vue from 'vue'
import { Card } from 'vant'

Vue.use(Card)
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    goto(hash) {
      history.go(-1)
    }
  },
  filters: {
    handlerActors(val) {
      if (val) {
        let arr = val.map((item) => item.name)
        return arr.join(' / ')
      } else {
        return '暂无主演'
      }
    },
    enen(val) {
      let arr = val.split('|')
      let res = arr.join(' / ')
      return res
    }
  },
  created() {
    this.$store.commit('hide')
    this.$http
      .get(api.getZixun, {
        params: {
          cinemaId: 5200
        }
      })
      .then((res) => {
        this.list = res.data.films
      })
  },
  beforeDestroy() {
    this.$store.commit('chuxian')
  }
}
</script>
<style scoped lang='scss'>
.top {
  height: 44px;
  line-height: 44px;
  width: 100%;
  display: flex;
  span {
    width: 100%;
    text-align: center;
  }
  i {
    font-size: 15px;
    position: absolute;
    left: 20px;
  }
}
.box {
  display: flex;
  height: 95px;
  flex-wrap: wrap;
  flex-direction: column;
  img {
    position: absolute;
    right: 10px;
  }
  div {
    font-size: 15px;
    width: 70%;
    padding-left: 20px;
    padding-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  span {
    font-size: 12px;
    color: #dbdbdb;
    padding-left: 20px;
    padding-top: 5px;
  }
  .actors {
    width: 174px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.big {
  margin-bottom: 55px;
}
.bottom {
  height: 44px;
  text-align: center;
  font-size: 13px;
  border-top: 1px solid #f4f4f4;
  line-height: 44px;
  margin-top: 20px;
}
</style>
